<template>
  <Popup v-model="show" closeable position="bottom" :style="{ height: '80%' }">
    <div>
      <p style="padding: 0 16px">客户查询</p>
      <Search
        v-model="searchValue"
        show-action
        :placeholder="searchTypeRes.join('/')"
        @search="onSearch"
      >
        <template #label>
          <span @click="onSearchTypeClick(searchType)">{{ searchType }}</span>
        </template>
        <template #action>
          <div @click="onSearch" size="small">查询</div>
        </template>
      </Search>
      <ListViewCpt
        ref="ListViewCpt"
        :request="listRequest"
        :requestParameter="searchForm"
        :immediateCheck="false"
      >
        <div slot-scope="{ item }">
          <Divider
            :style="{ padding: '0', margin: '0', borderColor: '#999' }"
          />
          <Cell
            clickable
            :title="'客户号: ' + item.customerNo"
            :value="item.chnName"
            @click="onListItemClick(item)"
          ></Cell>
          <Cell
            style="padding-top: 0"
            clickable
            :title="item.mobile"
            :value="item.idNo"
            @click="onListItemClick(item)"
          ></Cell>
        </div>
      </ListViewCpt>
    </div>
  </Popup>
</template>

<script>
import Popup from '@/widgets/Popup'
import Search from '@/widgets/Search'
import ListViewCpt from '@/components/list/ListViewCpt'
import Cell from '@/widgets/Cell'
import Divider from '@/widgets/Divider'
import { rqtPostListCustomerQueryPage } from '@/services/cms/customer'
const searchTypeRes = ['客户姓名', '客户号', '身份证号']

export default {
  name: 'CustomerQuery2Cpt',
  components: {
    Popup,
    Search,
    ListViewCpt,
    Cell,
    Divider
  },
  data() {
    return {
      show: false,
      searchValue: '',
      searchForm: {
        chnName: undefined,
        customerNo: undefined,
        idNo: undefined
      },
      searchTypeRes,
      searchType: searchTypeRes[0],
      listRequest: rqtPostListCustomerQueryPage
    }
  },
  methods: {
    showView() {
      this.show = true
    },
    onSearchTypeClick(value, isClick = true) {
      const index = searchTypeRes.findIndex(e => e == value)
      switch (index) {
        case 0:
          this.searchForm.chnName = this.searchValue
          this.searchForm.customerNo = undefined
          this.searchForm.idNo = undefined
          if (isClick) {
            this.searchType = searchTypeRes[1]
          }
          break
        case 1:
          this.searchForm.chnName = undefined
          this.searchForm.customerNo = this.searchValue
          this.searchForm.idNo = undefined
          if (isClick) {
            this.searchType = searchTypeRes[2]
          }
          break
        case 2:
          this.searchForm.chnName = undefined
          this.searchForm.customerNo = undefined
          this.searchForm.idNo = this.searchValue
          if (isClick) {
            this.searchType = searchTypeRes[0]
          }
          break
      }
    },
    onSearch() {
      this.onSearchTypeClick(this.searchType, false)
      this.$refs['ListViewCpt'].initListData()
    },
    onListItemClick(item) {
      this.$emit('selected', item)
      this.show = false
    }
  }
}
</script>
